import React, {useEffect, useState} from "react";
import {
    Avatar,
    Button,
    ButtonGroup, Col, Collapse, Form, Input,
    List,
    Popconfirm, Row,
    SideSheet,
    Toast,
} from "@douyinfe/semi-ui";
import {FriendShipControllerService, FriendVo} from "../../service";
import {resourcePath} from "../../config";

const FriendsView: React.FC = () => {
    const [data, setData] = useState<FriendVo[]>([]);
    const [visible, setVisible] = useState(false);
    const [formApi, setFormApi] = useState<object>();
    const [friendAddRequest,setFriendAddRequest]=useState<FriendVo[]>([]);
    const [myFriendAddRequest,setMyFriendAddRequest]=useState<FriendVo[]>([]);
    const getFormApi = (formapi: object) => {
        setFormApi(formapi);
    }

    const deleteFriend = async (friendVo: FriendVo) => {
        const res = await FriendShipControllerService.deleteFriend({
            id: friendVo.id
        })
        if (res.code !== 200) {
            Toast.error("删除失败:" + res.message)
            return;
        }
        Toast.info({content: "删除成功"});
    }
    const loadData = async () => {
        const res = await FriendShipControllerService.selectFriend()
        if (res.code !== 200) {
            Toast.error("数据加载失败:" + res.message)
            return;
        }
        setData(res.data || []);
    }
    const handleAddFriend=async ()=>{
        //@ts-ignore
        const res= await FriendShipControllerService.addFriend({id: formApi.getValues().id});
        if(res.code!=200){
            Toast.error("好友添加失败："+res.message);
            return;
        }

        Toast.info({content:"已发送好友邀请"});
        //@ts-ignore
        formApi.setValue('id','');
        await updateData();
    }
    const loadFriendAddRequest=async ()=>{
        const res=await FriendShipControllerService.selectFriendAddRequest();
        if(res.code!=200){
            Toast.error(`"我收到的好友请求"加载失败`);
            return;
        }
        setFriendAddRequest(res.data??[]);
    }
    const loadMyFriendAddRequest=async ()=>{
        const res=await FriendShipControllerService.selectMyFriendAddRequest();
        if(res.code!=200){
            Toast.error(`"我发出的好友请求"加载失败`);
            return;
        }
        setMyFriendAddRequest(res.data??[]);
    }
    const updateData=async ()=>{
        await loadData();
        await loadFriendAddRequest();
        await loadMyFriendAddRequest();

    }
    const agreeFriendRequest=async (item: FriendVo)=>{
        const res=await FriendShipControllerService.agreeFriendAddRequest(item.id || 0);
        if(res.code!=200){
            Toast.error("操作失败:"+res.message);
            return;
        }
        Toast.info({content:"操作成功"});
        await updateData();
    }
    const disagreeFriendRequest=async (item: FriendVo)=>{
        const res=await FriendShipControllerService.disagreeFriendAddRequest(item.id || 0);
        if(res.code!=200){
            Toast.error("操作失败:"+res.message);
            return;
        }
        Toast.info({content:"操作成功"});
        await updateData();
    }
    useEffect(() => {
        loadData();
    }, [])
    return (
        <>
            <List
                dataSource={data}
                renderItem={item => (
                    <List.Item
                        header={<Avatar color="blue" src={resourcePath+item.userAvatar}>{item.userAvatar}</Avatar>}
                        main={
                            <div>
                                <span
                                    style={{color: 'var(--semi-color-text-0)', fontWeight: 500}}>{item.userName}</span>
                            </div>
                        }
                        extra={
                            <ButtonGroup theme="borderless">
                                <Popconfirm
                                    title="确定是否要删除该好友？"
                                    content="此操作将不可逆"
                                    position={'leftTop'}
                                    onConfirm={() => {
                                        deleteFriend(item);
                                    }
                                    }>
                                    <Button>删除好友</Button>
                                </Popconfirm>
                            </ButtonGroup>
                        }
                    />
                )}
            />
            <div style={{
                margin: "auto", right: '5%', width: "fit-content",
                position: 'fixed',
                bottom: '10%',
            }}>
                <Avatar onClick={() => {
                    setVisible(!visible);
                    loadFriendAddRequest();
                    loadMyFriendAddRequest();
                }} size="large" style={{margin: 4}} alt='User'>
                    添加好友
                </Avatar>
            </div>
            <SideSheet title="添加好友" visible={visible} onCancel={() => {
                setVisible(!visible);
            }}
                       size={"small"}>
                <Form layout="horizontal"
                      getFormApi={getFormApi}>
                    <Form.Input noLabel field="id" style={{ width: 200 }} />
                    <Button type="primary" htmlType="submit" onClick={handleAddFriend}>添加</Button>
                </Form>
                <Collapse>
                    <Collapse.Panel header="我收到的好友请求" itemKey="1">
                        <List
                            dataSource={friendAddRequest}
                            renderItem={item => (
                                <List.Item
                                    header={<Avatar color="blue" src={resourcePath+item.userAvatar}>{item.userName}</Avatar>}
                                    main={
                                        <div>
                                            <span style={{ color: 'var(--semi-color-text-0)', fontWeight: 500 }}>{item.userName}</span>
                                        </div>
                                    }
                                    extra={
                                        <ButtonGroup theme="borderless">
                                            <Button onClick={async ()=>{await agreeFriendRequest(item)}}>同意</Button>
                                            <Button onClick={async ()=>{await disagreeFriendRequest(item)}}>拒绝</Button>
                                        </ButtonGroup>
                                    }
                                />
                            )}
                        />
                    </Collapse.Panel>
                    <Collapse.Panel header="我发出的好友请求" itemKey="2">
                        <List
                            dataSource={myFriendAddRequest}
                            renderItem={item => (
                                <List.Item
                                    header={<Avatar color="blue" src={resourcePath+item.userAvatar}>{item.userName}</Avatar>}
                                    main={
                                        <div>
                                            <span style={{ color: 'var(--semi-color-text-0)', fontWeight: 500 }}>{item.userName}</span>
                                        </div>
                                    }
                                    extra={
                                        <ButtonGroup theme="borderless">
                                            <Button disabled>等待回复</Button>
                                        </ButtonGroup>
                                    }
                                />
                            )}
                        />
                    </Collapse.Panel>
                </Collapse>
            </SideSheet>
        </>
    )
}
export default FriendsView;
